<template>
    <view>
        <view class="tab-container">
            <view class="tab-list">
                <block v-for="item in navList" :key="item.id">
                    <view
                        class="tab-list-item big column center pb-4"
                        :class="[item.id === selectId ? 'c-m' : '']"
                        @click="handleClickToNavPage(item.url)"
                    >
                        <hj-image
                            :src="item.id === selectId ? item.iconActive : item.icon"
                            width="48rpx"
                            height="48rpx"
                            mode="aspectFit"
                        />
                        <text class="ft-26 line-height1 mt-8">
                            {{ item.label }}
                        </text>
                    </view>
                </block>
            </view>
            <HjSafeFooter />
        </view>
        <view>
            <view class="tab-safe"></view>
            <HjSafeFooter />
        </view>
    </view>
</template>

<script setup>
import { ref, defineComponent } from 'vue'
import HjSafeFooter from '../hj-safe-footer/hj-safe-footer.vue'
// 引入组件
defineComponent({
    components: {
        HjSafeFooter
    }
})
// 定义 props
const props = defineProps({
    selectId: {
        type: Number,
        default: 1
    }
})

//tab数据
const navList = ref([
    {
        id: 1,
        label: '首页',
        url: '/pages/index/index',
        icon: 'tab-home.png',
        iconActive: 'tab-home-active.png'
    },
    {
        id: 9,
        label: '我的',
        url: '/pages/my/index',
        icon: 'tab-my.png',
        iconActive: 'tab-my-active.png'
    }
])

// 跳转方法
const handleClickToNavPage = url => {
    uni.switchTab({
        url
    })
}
</script>

<style scoped lang="scss">
.tab-list {
    display: flex;
    width: 100%;
    height: 120rpx;
    justify-content: space-between;
    align-items: center;
    &-item {
        position: relative;
    }
}
.tab-container {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 599;
    display: block;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
}
.tab-safe {
    width: 100%;
    height: 120rpx;
}
</style>
